<extend name="Base/common"/>
<block name="head"></block>

<block name="body" >

    <!--頂部-->
    <script type="text/javascript">
        $(".navbar-nav li").eq(0).addClass("active");
    </script>
    <!--頂部 結束-->
    <div class="container content">
        <!--廣告輪播-->
        <div class="adv top-adv">
            <div class="swiper-container swiperadv">
                <div class="swiper-wrapper">
                    <volist name="adv[pics]" id="adv">
                        <div class="swiper-slide">
                            <a href="#"><img src="__ROOT__{$adv|get_cover='path'}"/></a>
                        </div>
                    </volist>
                </div>
                <div class="swiper-pagination swiper-paginationadv"></div>
                <div class="swiper-button-prev swiper-button-prevadv"><i class="fa fa-angle-left"></i></div>
                <div class="swiper-button-next swiper-button-nextadv"><i class="fa fa-angle-right"></i></div>
            </div>
        </div>
        <!--廣告輪播 結束-->
        <!--商品切換-->
        <div class="adv">
            <div class="bs-docs-example">
                <ul id="myTab" class="nav nav-tabs">
                    <volist name="recom" id="data" key="key">
                        <li class=""><a href="#category{$key}" data-toggle="tab">{$data['type']}</a></li>
                    </volist>
                </ul>
                <script type="text/javascript">
                    $(".nav-tabs li").eq(0).addClass("active");
                </script>                                

                <div id="myTabContent" class="tab-content">                    
                    <volist name="recom" id="data" key="keys">                        
                        <div class="tab-pane fade " id="category{$keys}">                            
                            <div class="swiper-container swiper{$keys}">
                                <div class="swiper-wrapper">                       
                                    <volist name="data['data']" id="value">
                                        <div class="swiper-slide">
                                            <div class="col-md-6 col-sm-6 col-xs-7 text-right"><img src="__ROOT__{$value['image']|get_cover='path'}"/></div>
                                            <div class="col-md-6 col-sm-6 col-xs-5"><h2>{$value['title']}</h2><p>{$value['description']}</p><a href="#" data-target="#product" data-toggle="modal" class="btn btn_green">查看詳情</a></div>
                                       </div>
                                    </volist>                                                                    
                                </div>
                            </div>
                                <div class="swiper-pagination swiper-pagination{$keys}"></div>
                                <div class="swiper-button-prev swiper-button-prev{$keys} button-prev"><i class="fa fa-angle-left"></i></div>
                                <div class="swiper-button-next swiper-button-next{$keys} button-next"><i class="fa fa-angle-right"></i></div>
                        </div>
                    </volist>
                    <script type="text/javascript">
                        $(".tab-pane").eq(0).addClass("active in");
                    </script>
                </div>
            </div>
        </div>
        <div class="style_title"><a href="#">最新推薦</a></div>
        <!--商品切換 結束-->
        <!--獨有款式-->
        <div class="row adv">
            <div class="col-md-6 style_con">
                <div class="style_con1">
                    <a href="#" data-target="#product" data-toggle="modal">  
                        <img src="__ROOT__{$perfect[0]['image']|get_cover='path'}" class="blur"/>
                    </a>
                    <div class="text_con">
                        <h3 style="line-height:30px;">{$perfect[0]['title']}</h3>
                    </div>
                </div>
            </div>
            <div class="col-md-6  style_con">
                <div class="row style_con2">
                    <div class="col-md-5 col-sm-5 col-xs-5 text_con">
                        <h3> {$perfect[1]['title']}</h3>
                    </div>
                    <div class="col-md-7 col-sm-7 col-xs-7">
                        <a href="#" data-target="#product" data-toggle="modal">
                            <img src="__ROOT__{$perfect[1]['image']|get_cover='path'}" class="blur"/>
                        </a>
                    </div>
                </div>
            </div>
            <div class="col-md-6 style_con">
                <div class="row style_con2">
                    <div class="col-md-7 col-sm-7 col-xs-7">
                        <a href="#" data-target="#product" data-toggle="modal">
                            <img src="__ROOT__{$perfect[2]['image']|get_cover='path'}" class="style_con_h blur"/>
                        </a>
                    </div>
                    <div class="text_con col-md-5 col-sm-5 col-xs-5 style_con_h">
                        <h3>{$perfect[2]['title']}</h3>
                    </div>
                </div>
            </div>
        </div>
                <div class="style_more"><a href="{:U('Index/more')}">查看更多</a></div>
        <!--獨有款式 結束-->
    </div>
<!--獨有款式 彈出框--> 
<div  id="product" class="modal fade bs-example-modal-lg " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">     
    <div class="modal-dialog modal-lg">       
        <div class="modal-content">
              <div class="modal-header product_info_title">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h3>{$perfect[0]['title']}</h3>   
                   <div class="share_div">分享到：
                            <a href="#" class="share_facebook_f" title="facebook分享"><span class="fa-stack"><i class="fa fa-square fa-stack-2x share_facebook_bg"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a>
                            <a href="#" class="jiathis_button_weixin" title="wechat分享"><span class="fa-stack"><i class="fa fa-square fa-stack-2x share_weixin_bg"></i><i class="fa fa-wechat fa-stack-1x fa-inverse"></i></span></a>
                   </div> 
              </div>
            <div class="modal-body row product_info" >     
                <div class="col-md-6 product_info_img">          
                    <img src="__ROOT__{$perfect[2]['image']|get_cover='path'}"/>  
                </div>                    
                <div class="col-md-6 text_con">      
                    <p>{$perfect[0]['description']}</p>                 
                </div>               
            </div>          
        </div>     
    </div> 
</div>  
 <!--獨有款式 彈出框結束-->
    <block name="footer"></block>
</block>
